<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>

        <div class="flex" style="padding: 20px;">
          <el-input size="medium" style="width: 180px;" v-model="payment_txn" placeholder="付款单号"></el-input>
          <el-button type="primary" size="medium" @click="searchs">搜索</el-button>
        </div>
        <div class="cons">
          <div>收货信息：{{list.address_province}}{{list.address_city}}{{list.address_district}}{{list.address}}</div>
          <div>订单号：{{list.id}}</div>
          <div>身份证：{{list.id_card_num}}</div>
          <div>姓名：{{list.id_card_name}}</div>
          <div>失败原因：{{list.reason}}</div>
        </div>
      </div>
    </div>
    <!-- <foot></foot> -->
  </div>
</template>

<script>
  import axios from "axios";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import UploadExcelComponent from "@/components/UploadExcel/index.vue";
  export default {
    components: {
      "left": left,
      "top": top,
      'foot': foot,
      UploadExcelComponent
    },
    name: 'tuiguang_orders',
    data() {
      return {
        list: "",
        payment_txn:""
      }
    },
    created() {

    },
    methods: {
      searchs: function() {
        if(this.payment_txn){
          this.page = 1
          this.getlist()
        }else{
          this.$message.error('订单号不能为空');
        }

      },

      getlist: function() {
        var that = this
        axios.get('/api/tool/get/charge/order?payment_txn='+this.payment_txn)
          .then(response => {
            if (response.data.msg.code == 0) {
              that.list = response.data.data
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.search.page = page
        this.getlist()
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  .index {
   

    /deep/ .el-button--primary {
      background-color: #EEF7FF;
      color: #fff;
      border: 0;
      margin: 0 10px;
    }

    .team {
      background: #F9F9F9;
    }

    .powertop {
      display: flex;
      width: 640px;
    }

    .powertopli {
      flex-basis: 160px;
      line-height: 45px;
      border-top: 4px #F9F9F9 solid;
      color: #727272;
      border-right: 1px #EAEAEA solid;
      font-size: 14px;
      text-align: center;
    }

    .powertopact {
      background: #FFFFFF;
      border-top: 4px #DD2727 solid;
    }

    .piliang {}

    .piliangxuan {
      padding: 3px 0;
    }

    .mesquanxuan {
      padding: 10px 30px 20px 0px;
      display: flex;
      font-size: 14px;
      background: #EFEFEF
    }

    .cons {
      // border: 1px #EAEAEA solid;
      margin: 20px;

      .list {
        display: flex;
        color: #727272;
        line-height: 45px;
        margin: 0 20px;
        border-bottom: 1px #EAEAEA solid;
        margin-top: -1px;

        .td {
          font-size: 14px;

          .chuli {
            padding: 0 10px;
          }
        }

        .td:nth-child(1) {
          flex-basis: 100px;
        }

        .td:nth-child(2) {
          flex-basis: 600px;
        }

        .td:nth-child(3) {
          flex-basis: 180px;
        }

        .td:nth-child(4) {
          flex-basis: 220px;
          text-align: right;
        }
      }

      .el-pagination {
        text-align: right;
        margin: 20px 0
      }

      .act {
        color: #000;

        /deep/ .el-icon-message-solid {
          color: #EEF7FF
        }
      }

      .no {
        color: #999;
      }
    }

  }
</style>
